<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table, th, td{
			border: 1px solid #000;
			border-collapse: collapse;
		}

		th, td{
			padding: 5px 20px;
		}
		
		tbody tr:hover{
			background-color: #00eecc!important;
		}

		tbody tr:nth-child(2n+1){
			background-color: #ccc;
		}
	</style>
</head>
<body>

	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>学历</th>
				<th>爱好</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>	</tbody>

	</table>

	
	<script src="../lib/jquery-1.8.3.min.js"></script>
    <script src="../lib/mock-min.js"></script>
	<script type="text/javascript">
		!function(window,document,undefined) {
			var obj = {
				list: [
					{name: '王小明', age: '15', xueli: '高中', ahao: '篮球', mobile: '1346079094'},
					{name: '秦晓林', age: '15', xueli: '高中', ahao: '足球', mobile: '1346079094'},
					{name: '马云龙', age: '15', xueli: '高中', ahao: '台球', mobile: '1346079094'},
					{name: '郭守义', age: '15', xueli: '高中', ahao: '桌球', mobile: '1346079094'},
					{name: '云意林', age: '15', xueli: '高中', ahao: '篮球', mobile: '1346079094'},
					{name: '左晓菲', age: '15', xueli: '高中', ahao: '篮球', mobile: '1346079094'},
					{name: '李大力', age: '15', xueli: '高中', ahao: '篮球', mobile: '1346079094'},
					{name: '马晓松', age: '30', xueli: '高中', ahao: '篮球', mobile: '1346079094'}
				]
			}

			

			function createTable(data) {

				var i, len = data.list.length, 
					arr = [], list = data.list;
				var tbody = document.getElementsByTagName('tbody')[0];

				for(i = 0; i < len; i++) {
					arr.push(
						'<tr>',
							'<td>' + list[i].name + '</td>',
							'<td>' + list[i].age + '</td>',
							'<td>' + list[i].xueli + '</td>',
							'<td>' + list[i].ahao + '</td>',
							'<td>' + list[i].mobile + '</td>',
						'</tr>'									
					)
				}
				
				tbody.innerHTML = arr.join('')
			}

			createTable(obj);


		}(window,document)
	</script>
	
</body>
</html>
